<template>
  <div class="detail">
    <div class="back-nav-box">
      <BackNav left-arrow
               left-text="返回"
               title="商品详情" />
    </div>

    <div>
      <div class="detail-img">
        <img class="auto-img"
             :src="productDetail.large_img"
             alt="">
      </div>

      <div class="detail-box">
        <div class="pro-info">
          <div class="pro-left">
            <div class="zh-name">{{productDetail.name}}</div>
            <div class="en-name">{{productDetail.enname}}</div>
          </div>
          <div class="pro-price">&yen;{{productDetail.price}}</div>
        </div>

        <!-- //规格 -->
        <div class="pro-rule">
          <div class="pro-rule-item"
               v-for="(item,index) in productDetail.rules"
               :key="index">
            <div class="pro-rule-title">{{item.title}}</div>
            <div class="pro-sub-rule">
              <div class="pro-sub-rule-item"
                   :class="{active:item.activeIndex===i}"
                   v-for="(v,i) in item.rules"
                   :key="i"
                   @click="toggleRule(item,i)">{{v.title}}</div>
            </div>
          </div>
        </div>

        <!-- 设置数量 -->
        <div class="select-count">
          <div class="select-text">设置数量</div>
          <div class="select-box">
            <van-stepper v-model="count"
                         theme="round"
                         button-size="22"
                         disable-input />
          </div>
        </div>

        <!-- 描述 -->
        <div class="describe">
          <div class="describe-title">商品描述</div>
          <div class="describe-text">
            <div class="describe-text-item"
                 v-for="(item,index) in productDetail.desc"
                 :key="index">{{index+1}}、{{item}}</div>
          </div>
        </div>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="bag"
                             text="购物袋"
                             color="#646566"
                             :badge="shopbagCount === 0 ? '' : shopbagCount"
                             @click="toShopbag" />
      <van-goods-action-icon icon="like"
                             :text="isLike ? '已收藏' : '未收藏'"
                             :color="isLike ? '#0C34BA' : '#646566'"
                             @click="likeAndNotlike" />
      <van-goods-action-button color="#2450F2"
                               type="warning"
                               text="加入购物袋"
                               @click="addShopbag" />
      <van-goods-action-button color="#0C34BA"
                               type="danger"
                               text="立即购买"
                               @click="submitOrder" />
    </van-goods-action>
  </div>
</template>

<script>
import BackNav from "@/components/BackNav.vue";
export default {
  name: "Detail",
  data () {
    return {
      count: 1,

      //商品pid
      pid: "",

      //商品详情数据
      productDetail: {},

      //是否收藏商品
      isLike: false,

      //购物车总数
      shopbagCount: 0
    };
  },
  components: {
    BackNav,
  },
  created () {
    //截取商品的pid
    this.pid = this.$route.query.pid;
    this.getProductDetailByPid(this.pid);

    this.findUserLike();

    this.findUserShopbagCount();
  },
  methods: {
    //根据商品pid查询商品数据
    getProductDetailByPid (pid) {
      this.axios({
        method: 'get',
        url: '/productDetail',
        params: {
          pid: pid
        },
      }).then(res => {
        //  console.log('getProductDetailByPid res ==> ', res);
        if (res.data.code === 600) {
          let data = res.data.result[0];
          data.desc = data.desc.split(/\n/);

          //处理规格数据
          //   [
          //       {title:'温度',activeIndex:0,rules:[{title:"冷"},{title:'热'}]}
          //   ]

          let ruleData = ['cream', 'sugar', 'milk', 'tem'];
          let rules = [];
          ruleData.forEach(v => {
            if (!data[v]) {
              return;
            }
            let r = {
              title: data[`${v}_desc`],
              //默认激活的规格
              activeIndex: 0,
              rules: []
            };

            let rs = data[v].split(/\//);
            rs.forEach(item => {
              let subRule = {
                title: item
              };
              r.rules.push(subRule);
            });
            rules.push(r);
          });
          data.rules = rules;
          this.productDetail = data;
        }
      })
        .catch((err) => {
          console.log(err);
        });
    },

    //切换规格
    toggleRule (item, i) {
      if (item.activeIndex === i) {
        return;
      }
      item.activeIndex = i;
    },

    //收藏商品
    likeAndNotlike () {
      //发起收藏或者取消收藏请求
      let url = '';
      if (this.isLike) {
        //取消收藏
        url = '/notlike';
      } else {
        //收藏
        url = '/like';
      }
      this.axios({
        method: 'post',
        url,
        data: {
          pid: this.pid,
        }
      }).then(res => {
        // console.log('res ===>',res);
        if (res.data.code === 700) {
          this.$route(res.data.msg);
          //跳转登录页面
          setTimeout(() => {
            this.$route.push({ name: 'Login' });
          }, 2000)
        }

        this.$toast(res.data.msg)
        if (res.data.code === 800) {
          // this.isLike=!this.isLike
          this.isLike = true
        } else if (res.data.code === 900 && res.data.result === 1) {
          this.isLike = false
        }

      }).catch(err => {

      })
    },

    //查询用户是否收藏该商品
    findUserLike () {
      this.axios({
        method: 'get',
        url: '/findlike',
        params: {
          pid: this.pid
        }
      }).then(res => {
        // console.log('res ===>',res);
        if (res.data.code === 1000 && res.data.result.length === 1) {
          //该商品已经被收藏
          this.isLike = true;
        }
      }).catch(err => {

      })
    },

    //加入购物袋
    addShopbag () {
      //获取商品规格
      let rules = [];
      this.productDetail.rules.forEach(v => {
        rules.push(v.rules[v.activeIndex].title);
      })
      // console.log('rules==>',rules);

      this.axios({
        method: 'post',
        url: '/addShopcart',
        data: {
          pid: this.pid,
          rule: rules.join('/'),
          count: this.count
        }
      }).then(res => {
        // console.log('res ===>',res);s
        if (res.data.code === 700) {
          this.$route(res.data.msg);
          //跳转登录页面
          setTimeout(() => {
            this.$router.push({ name: 'Login' });
          }, 2000)
        }

        this.$toast(res.data.msg)

        if (res.data.code === 3000) {
          this.shopbagCount += this.count;
        }

      }).catch(err => {

      })
    },
    //立即购买
    submitOrder () {
      //获取提交的商品
      let sids = [];
      this.$router.push({
        name: "ConfirmOrder",
        query: { sids: sids.join("-") },
      });
    },

    //用户购物袋数量
    findUserShopbagCount () {
      this.axios({
        method: 'get',
        url: '/shopcartCount',
      }).then(res => {
        // console.log('res ===>',res);

        if (res.data.code === 4000) {
          this.shopbagCount = res.data.result
        }

      }).catch(err => {
        console.log(err);
      })
    },

    //购物袋跳转
    toShopbag () {
      this.$router.push({ name: "Shopbag" });
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  .back-nav-box {
    position: sticky;
    top: 0;
  }
  padding-bottom: 50px;
  .describe-text {
    color: #666;
    margin-top: 10px;
  }
  .describe-text-item {
    margin-bottom: 5px;
  }
  .describe-title {
    font-size: 14px;
  }
  .describe {
    margin-top: 20px;
  }
  /deep/ .van-stepper--round .van-stepper__plus {
    background-color: #0c34ba;
  }
  /deep/ .van-stepper--round .van-stepper__minus {
    color: #0c34ba;
    border-color: #0c34ba;
  }
  .select-box {
    margin-left: auto;
  }
  .select-text {
    font-size: 14px;
  }
  .select-count {
    margin-top: 20px;
    padding: 20px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
  }
  .pro-sub-rule-item {
    width: 60px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background-color: #e8e8e8;
    margin-right: 10px;
    border-radius: 12px;
    &:last-child {
      margin-right: 0;
    }
    &.active {
      background-color: #0c34ba;
      color: #fff;
    }
  }
  .pro-sub-rule {
    display: flex;
  }
  .pro-rule-title {
    width: 50px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
  }
  .pro-rule-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .pro-rule {
    margin-top: 30px;
  }
  .zh-name {
    font-size: 14px;
  }
  .en-name {
    color: #999;
  }
  .pro-price {
    margin-left: auto;
    font-size: 14px;
    color: #0c34ba;
    font-weight: bold;
  }
  .pro-info {
    display: flex;
    align-items: center;
  }
  .detail-box {
    margin: 0 10px;
    padding: 10px;
    background-color: #fff;
    position: relative;
    top: -20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .detail-img {
    background-color: #e8e8e8;
  }
  /deep/.van-info {
    background-color: #0c34ba;
  }
}
</style>